<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>MONGODB</title>
    <link rel="StyleSheet" media="all" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="StyleSheet" media="all" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="StyleSheet" media="all" type="text/css" href="bootstrap/css/login.css">
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="bootstrap/js/textarea.js"></script>
  </head>
  <body style="background-color:#DCDCDC; ">
    <div style="width:1000px;margin:auto;">
      <div class="container">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container" style="width: auto; padding: 0 20px;">
              <a class="brand" href="index.html">Mongodebeando</a>
              <ul class="nav"  style="padding-bottom:-5px;">
                <li class="active"><a href="perfil.html">Perfil</a></li>
                <li><a href="contactos.html">Contactos</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="container" style="background-color:gray;padding:10px 0px;margin-bottom:20px;">
          <div class="container" style="background-color:white; width:800px;heigth:260px;padding:10px;">
          <table>
            <tbody>
              <tr>
                <td rowspan="2">
                  <div class="container" style="width:230px;height:272px;float:left;">
                    <img src="images/hombre.jpg" alt="">
                  </div>
                </td>
                <td style="padding-left:10px;">
                    <div class="container" style="float:right;background-color:#87CEEB;width:540px;height:253px;padding:10px">
                      <div class="container" style="background-color:#87CEEB;width:510px;height:200px;margin-bottom:10px;">
                        <h1>Jose Antonio Perez Garcia</h1>
                        <p>DATOS PERSONALES</p>
                      </div>
                      <div class="container" style="background-color:#87CEEB;width:510px;height:40px;">
                        <img src="images/linea.jpg">
                        <button class="btn btn-mini" type="button" style="margin:0px 90px;">Agregar Amigo</button>
                        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3 id="myModalLabel">Escriba su mensaje</h3>
                          </div>
                          <div class="modal-body">
                            <textarea style="width:500px;" rows="3" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea>
                          </div>
                          <div class="modal-footer">
                            <button class="btn btn-primary">Enviar</button>
                          </div>
                        </div>
                        <button data-toggle="modal" href="#myModal" class="btn btn-mini" type="button">Dejar Mensaje</button>
                      </div>
                    </div>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
          <div class="container" style="background-color:white; width:800px;padding:10px;margin-top:10px;">
            <div class="container" style="width:340px;float:left;height:460px;background-color:gray;padding:15px;">
              <a href="#"><h2 style="padding:10px;">Muro</h2></a>
              <table class="table" style="background-color:white;margin:0px 10px;width:320px;">
                <tr><td>mensaje1</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
                <tr><td>mensaje2</td></tr>
              </table>
            </div>
            <div class="container" style="width:390px;float:right;height:460px;background-color:gray;padding:15px;">
              <a href="contactos.html"><h2 style="padding:10px;">Amigos</h2></a>
              <table>
                <tr>
                  <td style="padding:0px 10px 10px 10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:0px 10px 10px 10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:0px 10px 10px 10px;"><img src="images/amigos.jpg"></td>
                </tr>
                <tr>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                </tr>
                <tr>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                  <td style="padding:10px;"><img src="images/amigos.jpg"></td>
                </tr>
              </table>  
            </div>
          </div>
        </div>  
      </div>
    </div>
  </body>
</html>